<template>
  <div class="personal-information-container">
    <el-container>
      <el-main>
        <div class="personal-information-main" :style="userInfo.type?'height:35.3125rem':'height:auto'">
          <el-card>
            <div slot="header" class="personal-information-main-header">
              <h3>个人信息</h3>
              <el-button type="primary" size="mini" @click="handleSubmit"
                >提交</el-button
              >
            </div>
            <div class="personal-information-main-content">
              <el-form ref="form" :model="userInfo" label-width="100px">
                <el-form-item label="姓名">
                  <el-input v-model="userInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                  <el-input v-model="userInfo.idNumber" disabled></el-input>
                </el-form-item>
                <el-form-item
                v-if="userInfo.type"
                  label="储蓄卡余额"
                  class="balance_account_form_item"
                >
                  <div class="">
                    <el-input
                      v-model="userInfo.accountBalance"
                      disabled
                    ></el-input>
                    <el-button type="primary" class="balance_account" @click="showBalanceDialog"
                      >充值</el-button
                    >
                  </div>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio v-model="userInfo.sex" label="男">男</el-radio>
                  <el-radio v-model="userInfo.sex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item v-if="userInfo.type == '0'" label="医生介绍">
                  <el-input
                    maxlength="150"
                    resize="none"
                    show-word-limit
                    disabled
                    type="textarea"
                    v-model="userInfo.description"
                    class="personal-information-main-content-descriptions"
                  ></el-input>
                </el-form-item>
                <el-form-item label="头像" v-if="!userInfo.type">
                  <el-upload
                  disabled
                    class="avatar-uploader"
                    action="https://v2.alapi.cn/api/image"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                  >
                    <img
                      :src="userInfo.image"
                      class="avatar"
                    />
                    <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                  </el-upload>
                </el-form-item>
              </el-form>
              <div class="logout">
                <el-link type='primary' :underline='false' @click="logout">退出登录</el-link>
              </div>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
    <el-dialog
      title="请输入充值金额"
      :visible.sync="balanceDialogVisible"
      width="500"
      :before-close="dialogBeforeClose">
      <div class="balance-account-dialog">
        <el-input-number v-model="accountBalance" :precision="2" :min="1" :max="1000" :step="1" label="请输入充值金额"></el-input-number>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="balanceDialogVisible = false" style="background-color:#ffffff">取 消</el-button>
        <el-button type="primary" @click="handleDialogSure">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="用户支付"
      :visible.sync="QRcodeDialogVisible"
      width="500"
      :before-close="QRdialogBeforeClose">
      <div>
        <div>请支付<span style="color:red">{{accountBalance}}</span>元</div>
        <div>
          <img src="@/assets/images/pay.png" alt="支付" srcset="">
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="QRdialogBeforeClose" style="background-color:#ffffff">取 消</el-button>
        <el-button type="primary" @click="handleQRdialogSure">已支付</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserInfo,updateUser, userRecharge } from "@/api/user"
import { mapGetters } from "vuex"
export default {
  name: "PersonalInformation",
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      userInfo: {
        name: "",
        idNumber: "",
        sex: "男",
        accountBalance: 0,
        type: "1",
        descriptions: "",
        image:
          "blob:http://localhost:8080/b61c3910-e59e-4c80-9a8e-32cea5f6915f",
      },
      balanceDialogVisible:false,
      accountBalance:0,
      QRcodeDialogVisible:false
    }
  },
  computed: {
    ...mapGetters(["id"]),
  },
  created() {
    this.handleGetUserInfo()
  },
  methods: {
    async handleGetUserInfo() {
      let res = await getUserInfo({id:this.id})
      console.log(res,'user')
      if(res.data){
        this.userInfo = res.data
      }else {
        this.$message.error('获取用户数据失败')
      }
    },
    handleAvatarSuccess(res, file) {
      this.userInfo.image = URL.createObjectURL(file.raw)
    },
    async handleSubmit() {
      console.log(this.validName())
      if(this.validName()){
        let {data} = await updateUser(this.userInfo)
        if(data){
          this.$message.success('修改成功')
        }else {
          this.$message.error('修改失败')
          return
        }
      }
    },
    validName() {
      if (!this.userInfo.name) {
        this.$message.error("请输入姓名")
        return false
      }
      return true
    },
    showBalanceDialog(){
      this.balanceDialogVisible = true
    },
    dialogBeforeClose(){
      this.balanceDialogVisible = false
    },
    async handleDialogSure(){
      this.QRcodeDialogVisible = true
      this.balanceDialogVisible = false
      
    },
    QRdialogBeforeClose(){
      this.QRcodeDialogVisible = false
      this.$message.info('用户已取消支付')
    },
    handleQRdialogSure(){
      this.$confirm(`此操作会充值${this.accountBalance}元,请确认是否继续`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          console.log(this.accountBalance)
          let res = await userRecharge({add:this.accountBalance,id:this.id})
          console.log(res)
          if(res.code == 200){
            this.$message.success('充值成功')
            this.balanceDialogVisible = false
            this.QRcodeDialogVisible = false
            this.accountBalance = 0
            this.handleGetUserInfo()
          }else {
            this.$message.error('充值失败')
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '用户已取消充值'
          });          
        });
    },
    logout(){
      localStorage.removeItem('token')
      localStorage.removeItem('user')
      this.$router.push('/login')
    }
  },
}
</script>

<style lang="scss">
.personal-information-container {
  .el-container{
    height: 100vh;
  }
  .text-primary {
    color: var(--primary) !important;
  }
  .el-dialog__body{
    text-align: center;
  }
  .el-button {
    background-color: #48dac6;
  }
  .el-container {
    background: url("@/assets/images/my.jpg") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.75;
  }
  .el-header {
    background-color: #ffffff;
    position: fixed;
    width: 100%;
    z-index: 999;
    // background: linear-gradient(120deg, #58dbea 20%, #c3f1fa 100%);
    .header-left {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;

      &-name {
        margin: 1rem;
        font-size: 1.5rem;
      }
    }
  }
  .personal-information-main {
    margin-top: 4rem;
    width: 100%;
    // height: 100%;
    height: 35.3125rem;
    display: flex;
    justify-content: center;
    .el-card {
      width: 35rem;
    }
    .el-input {
      width: 15rem;
    }
    &-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .el-button {
        width: 4rem;
        height: 2.5rem;
      }
    }
    &-content {
      &-descriptions {
        height: 11rem;
        .el-textarea__inner {
          height: 100%;
        }
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .balance_account {
    margin: 1rem;
    background-color: #409eff;
  }
  .balance_account_form_item {
    display: flex;
    align-items: center;
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }

  .balance-account-dialog{
    display: flex;
    justify-content: center;
  }

  .dialog-footer{
    width: 100%;
    justify-content: space-evenly;
    display: flex;
  }

  .logout{
    display: flex;
    .el-link{
      margin-left: auto;
    }
  }
}
</style>
